page {
  background: #F4F5F9;
}

.productMap {
  padding-bottom: 250rpx;

  .productList {
    margin-top: 32rpx;
  
    .productItem {
      width: 686rpx;
      margin:  0 auto;
      margin-top: 32rpx;
      border-radius: 32rpx;
      background: #FFFFFF;
      padding: 48rpx 34rpx;
      box-sizing: border-box;

      .productItem-title {
        font-size: 45rpx;
        font-weight: bolder;
        color: #000000;
        
      }

      .serch {
        width: 622rpx;
        height: 72rpx;

        background: #F4F5F9;
        border-radius: 36rpx;
        margin: 0 auto;
        display: flex;
        align-items: center;
        padding: 0 42rpx;
        box-sizing: border-box;

        image {
          width: 40rpx;
          height: 40rpx;
        }

        input {
          flex: 1;
          height: 72rpx;
          padding: 0 10rpx;
        }
      }

      .content {
        margin-top: 48rpx;

        .contentItem {

          .content-title {
            font-size: 32rpx;
            font-weight: bolder;
          }

          .input {
            margin-top: 24rpx;
            margin-bottom: 48rpx;
            display: flex;
            justify-content: flex-end;
            align-items: center;
            width: 623rpx;
            height: 80rpx;
            background: #FFFFFF;
            border-radius: 8rpx;
            border: 2rpx solid #020113;

            font-size: 24rpx;
            .text{
              // flex: 1;
              // width: 200rpx;
              // height: 80rpx;
              // line-height: 80rpx;
            }
            input{
              flex: 1;
              padding:0 20rpx;
              height: 80rpx;
              line-height: 80rpx;
              box-sizing: border-box;
              text-align: right;
            }
            image {
              margin: 0 20rpx;
              width: 30rpx;
              height: 30rpx;
            }
          }

          .imageList {
            display: flex;
            //  align-items: center;
            flex-wrap: wrap;
            margin-top: 24rpx;
            padding: 0 0 32rpx  0;
            border-bottom: 2rpx solid rgba(19, 1, 1,.1);
            margin-bottom: 32rpx;

            .image {
              height: 196rpx;
              width: 196rpx;
              margin-bottom: 16rpx;
              margin-right: 15rpx;
              border-radius: 16rpx;
              position: relative;
              image{
                border-radius: 16rpx;
              }
              &:nth-of-type(3N-3) {
                margin-right: 0rpx;
              }
            }

            .ok {
              position: absolute;
              right: 8rpx;
              bottom: 12rpx;
              width: 48rpx;
              height: 48rpx;
              
            }

            .imageprice {
              width: 196rpx;
              height: 196rpx;
            }
          }
        }
      }
    }
  }

  .btns {
    width: 750rpx;
    height: 196rpx;
    background: #FFFFFF;
    box-shadow: 0rpx 8rpx 48rpx 0rpx rgba(1, 7, 19, 0.15);
    border-radius: 32rpx 32rpx 0rpx 0rpx;
    // display: flex;
    position: fixed;
    left: 0;
    bottom: 0;

    .next {
      width: 686rpx;
      height: 88rpx;
      background: #D6000F;
      margin: 24rpx auto;

      border-radius: 44rpx;
      text-align: center;
      line-height: 88rpx;



      font-size: 32rpx;
      font-weight: bold;
      color: #FFFFFF;
    }
  }
}
.bigbox{
  position: relative;
}
.typeLiis{
  position: absolute;
  left: 0rpx;
  top: 150rpx;
  z-index: 200;
  
  background: white;
  height: 0rpx;
  transition: all 0.3s;
  overflow: auto;
  .typeItem{
    width: 590rpx;
    height: 80rpx;
    padding: 0 53rpx;
    margin: 0 16rpx;
    box-sizing: border-box;
    line-height: 80rpx;
    text-align: right;
    border-bottom: 2rpx solid rgba(19, 1, 1,.1);
    font-size: 24rpx;
    &:first-child{
      // border-top: 0 solid transparent;
    }
    &:last-child{
      // border-bottom: 0rpx solid transparent;
    }
  }
}
.activetypeList{
  
height: 329rpx;
  transition: all 0.3s;
  // border: 2rpx solid black;

background: #FFFFFF;
box-shadow: 0rpx 8rpx 24rpx 0rpx rgba(0,0,0,0.2);
border-radius: 8rpx;
}


/* 重写 checkbox 样式 */
 /* 未选中的 背景样式 */
 checkbox .wx-checkbox-input{
  border-radius: 50%;/* 圆角 */
  width: 30rpx; /* 背景的宽 */
  height: 30rpx; /* 背景的高 */
}
/* 选中后的 背景样式*/
checkbox .wx-checkbox-input.wx-checkbox-input-checked{
  border: 1rpx solid #f3333e;
  background: #f3333e;
}

checkbox .wx-checkbox-input.wx-checkbox-input-checked::before{
  border-radius: 50%;
  width: 35rpx;/* 选中后对勾大小，不要超过背景的尺寸 */
  height: 35rpx;/* 选中后对勾大小，不要超过背景的尺寸 */
  line-height: 35rpx;
  text-align: center;
  font-size:25rpx; /* 对勾大小 30rpx */
  font-weight: bolder;
  color:#fff; /* 对勾颜色 白色 */
  background: transparent;
  transform:translate(-50%, -50%) scale(1);
  -webkit-transform:translate(-50%, -50%) scale(1);
}
.addproducts{

  width: 168rpx;
  height: 28rpx;
  font-size: 28rpx;
  font-weight: bolder;
  color: #D6000F;
  margin: 48rpx auto;
  padding-bottom: 8rpx;
  border-bottom: 2rpx solid #D6000F;
  line-height: 28rpx;

}


.heder-title{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 32rpx;
  image{
    width: 50rpx;
    height: 50rpx;
  }
}